<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
	<!--bootstrap-addtabs-->
	<script type="text/javascript" src="../plugins/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../plugins/bootStrap-addTabs/bootstrap.addtabs.css"/>
	<!--bootstrap-table-->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-table/dist/bootstrap-table.css" />
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/bootstrap-table.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
	<!--bootstrap-toastr-->
	<script type="text/javascript" src="../plugins/toastr/toastr.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../plugins/toastr/toastr.css" />
	<!--bootstrap-dialog-->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-dialog/dist/css/bootstrap-dialog.css" />
	<script type="text/javascript" src="../plugins/bootstrap-dialog/dist/js/bootstrap-dialog.js"></script>
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
	<!-- bookstrap-fileinput -->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/locales/zh.js"></script>
    <script>
		$(function () {
			findItem();
			$("#item").select2();
		})
		//一级
		function findItem() {
			$.ajax({
				url:"/tbGoods/findItem",
				type:"post",
				dataType:"json",
				async:false,
				data:{},
				success:function (result) {
					var r = "";
					r +="<select style='width:100%'>"
					for (var i=0;i<result.length;i++){
						r += '<tr>';
						r += '<td><option value="'+result[i].id+'">'+result[i].name+'</option></select></td>';
						r += '</tr>';
					}
					r +="</select>";
					$("#one").html(r);
					// console.log(result)
				},
				error:function () {
					alert("系统异常")
				}
			})
		}
		//二级
		function tow(pid) {
			$.ajax({
				url:"/tbGoods/findItem?pid="+pid,
				type:"post",
				dataType:"json",
				async:false,
				data:{},
				success:function (result) {
					var r = "";
					r +="<select style='width:100%'>"
					for (var i=0;i<result.length;i++){
						r += '<tr>';
						r += '<td><option value="'+result[i].id+'">'+result[i].name+'</option></select></td>';
						r += '</tr>';
					}
					r +="</select >";
					$("#tow").html(r);
					// console.log(result)
				},
				error:function () {
					alert("系统异常")
				}
			})
		}
		//三级
		function three(pid) {
			$.ajax({
				url:"/tbGoods/findItem?pid="+pid,
				type:"post",
				dataType:"json",
				async:false,
				data:{},
				success:function (result) {
					var r = "";
					r +="<select style='width:100%'>"
					for (var i=0;i<result.length;i++){
						r += '<tr>';
						r += '<td><option value="'+result[i].id+'">'+result[i].name+'</option></select></td>';
						r += '</tr>';
						$("#tempId").html("模板ID:"+result[i].typeId);
					}
					r +="</select>";
					$("#three").html(r);
					// console.log(result)
				},
				error:function () {
					alert("系统异常")
				}
			})
		}
		//获取规格信息
		function getSpec(id) {
			var list;
			$.ajax({
				url: "/tbGoods/getSpecInfoBySpecId/"+id,
				type: "post",
				data: {},
				dataType: "json",
				async: false,
				success: function (result) {
					list =  result
				},
				error: function () {
					alert("系统异常,请联系管理员");
				}
			});
			return list;
		}
		function temp(pid) {
			alert(1111)
			$.ajax({
				url:"/tbGoods/findtemp?pid="+pid,
				type:"post",
				dataType:"json",
				async:false,
				data:{},
				success:function (result) {
					//扩展属性
					var attr = JSON.parse(result.customAttributeItems);
					// console.log(attr)
					var info = '';
					$(attr).each(function (i,e) {
						info +='<div>';
						info +='<div class="col-md-2 title">'+e.text+'</div>';
						info +='<div class="col-md-10 data">';
						info +='<input class="form-control" placeholder="'+e.text+'">';
						info +='</div>';
						info +='</div>';
					});
					$("#customAttribute").html(info);
						//规格
					var spec = JSON.parse(result.specIds);
					var info = '';
					$(spec).each(function (i,e) {
						info +='<div>';
						info +='<div class="col-md-2 title">'+e.text+'</div>';
						info +='<div class="col-md-10 data">';
						var id = e.id;
						var list = getSpec(e.id);
						$(list).each(function (i,s) {
							info +='<span><input  type="checkbox" value="'+s.optionName+'"> '+s.optionName+'</span> ';
						});
						info +='</div>';
						info +='</div>';
					});
					$("#spec2").html(info);
		},
			})
		}
		//增加
		function addGoods() {
			//获取图图片的值和颜色
			var itemImages = $("[name=img_id]")
			var itemImagesColor = $("[name=color]")
			var itemImgs = []
			for (let i = 0; i < itemImages.length; i++) {
				var imgs = {color:itemImagesColor[i].value,url:itemImages[i].value}
				itemImgs.push(imgs)
			}
			var itemImgsString = JSON.stringify(itemImgs)
			console.log(itemImgsString);
			var select =  $("#item").select2("data");
			var item ={id:select.id}
			console.log(item.id)
			console.log($("#tempId").val())
			var content = editor.html();

			//扩展属性
			var attr = [];
			$("#customAttribute").children().each(function (i,e) {
				$(e).find("div:eq(0)").text();
				$(e).find("input").val();
				attr.push({text:$(e).find("div:eq(0)").text(),value:$(e).find("input").val()})
			});
			console.log(JSON.stringify(attr))
			//规格
			var spec = [];
			$("#spec2").children().each(function (i,e) {
				var value = [];
				$(e).find("input:checked").each(function (i,s) {
					value.push(s.value);
				});
				spec.push({attributeName:$(e).find("div:eq(0)").text(),attributeValue:value});
			});

			//详细规格
			//屏幕尺寸 网络制式
			var name = '';
			var name2 = '';
			$("#sorting th").each(function (i,e) {
				if(i == 0){
					name = $(e).text();
				}
				if(i == 1){
					name2 = $(e).text();
				}
			});
			console.log(name)
			console.log(name2)
			var data = [];
			var tr = $("#spec3 tr");
			$(tr).each(function (i,e) {
				var a = $(e).find("td:eq(0)").text();
				var a2 = $(e).find("td:eq(1)").text();
				var a3 = $(e).find("td:eq(2) input").val();
				var a4 = $(e).find("td:eq(3) input").val();
				var info = '';
				var spec = '{"'+name+'":"'+a+'","'+name2+'":"'+a2+'"}';
				info = spec+"/"+a3+"/"+a4;
				data.push(info);
			});
			console.log(data)

			$.ajax({
				url: "/tbGoods/saveGoodsInfo",
				type: "post",
				data: {
					/*商品图片上传*/
					itemImages:itemImgsString,
					// smallPic:image,
					/*扩展属性*/
					customAttributeItems:JSON.stringify(attr),
					/*规格*/
					specificationItems:JSON.stringify(spec),
					/*详细规格信息*/
					msg:JSON.stringify(data),
					/*商品基本信息*/
					category1Id:$("#one").val(),
					category2Id:$("#tow").val(),
					category3Id:$("#three").val(),
					goodsName:$("#goodsNmae").val(),
					brandId:$("#brand").val(),
					caption:$("#caption").val(),
					price:$("#price").val(),
					typeTemplateId:item.id,
					/*商品介绍*/
					introduction:content,
					packageList:$("#packageList").val(),
					saleService:$("#saleService").val()
				},
				dataType: "json",
				async: false,
				success: function (result) {
					if (result.code == 10000){
						window.location.reload();
						alert(result.message);
					}else if (result.code == 10001){
						alert(result.message)
					}
				},
				error : function (result) {
					alert("增加成功");
				}
			});
		}
	</script>
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">
                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
                        <!--tab内容-->
                        <div class="tab-content">
                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>

		                           	  <div class="col-md-10 data">
		                           	  	<table id="tableList">
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select id="one" class="form-control" onclick="tow(this.value)" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select id="tow"  class="form-control select-sm" onclick="three(this.value)" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select   id="three" class="form-control select-sm"  onclick="temp(this.value)"></select>
													<input type="hidden" id="typeTemplateId">
												</td>
		                              			<td id="tempId">
<!--		                           	  				模板ID:19-->
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              </div>
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"  id="goodsNmae" placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
										  <select id="item">
											  <option th:each="typ : ${typeList}"  th:value="${typ.id}" >
												  [[${typ.name}]]
											  </option>
									  </select>
		                           </div>

								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="caption"  placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control"  id="price" placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
									<div class="col-md-10 data editer">
										<textarea id="introduction" name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
									</div>
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" id="packageList"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control"  id="saleService"   placeholder="售后服务"></textarea>
		                           </div>
                                </div>
                            </div>

							<!--图片上传-->
							<div class="tab-pane" id="pic_upload">
								<div class="row data-type">
									<!-- 颜色图片 -->
									<div class="btn-group">
										<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

									</div>

									<table class="table table-bordered table-striped table-hover dataTable">
										<thead>
										<tr>

											<th class="sorting">颜色</th>
											<th class="sorting">图片</th>
											<th class="sorting">操作</th>
										</thead>
										<tbody id="to_update_img">
										</tbody>
									</table>

								</div>
							</div>

							<!--扩展属性-->
							<div class="tab-pane" id="customAttribute">

							</div>

							<!--规格-->
							<div class="tab-pane" id="spec">
								<div class="row data-type">
									<div class="col-md-2 title">是否启用规格</div>
									<div class="col-md-10 data">
										<input type="checkbox" >
									</div>
								</div>
								<p>

								<div>

									<div class="row data-type" id="spec2">

										<div>
											<div class="col-md-2 title">屏幕尺寸</div>
											<div class="col-md-10 data">

					                            <span>
					                            	<input  type="checkbox" >4.0
					                            </span>
												<span>
					                            	<input  type="checkbox" >4.5
					                            </span>
												<span>
					                            	<input  type="checkbox" >5.0
					                            </span>

											</div>
										</div>
										<div>
											<div class="col-md-2 title">网络制式</div>
											<div class="col-md-10 data">

					                            <span>
					                            	<input  type="checkbox" >2G
					                            </span>
												<span>
					                            	<input  type="checkbox" >3G
					                            </span>
												<span>
					                            	<input  type="checkbox" >4G
					                            </span>

											</div>
										</div>

									</div>


									<div class="row data-type">
										<table class="table table-bordered table-striped table-hover dataTable">
											<thead>
											<tr id="sorting">
												<th class="sorting">网络制式</th>
												<th class="sorting">屏幕尺寸</th>
												<th class="sorting">价格</th>
												<th class="sorting">库存</th>
												<th class="sorting">是否启用</th>
												<th class="sorting">是否默认</th>
											</tr>
											</thead>
											<tbody id="spec3">
											<tr>
												<td>移动3G</td>
												<td>5.5寸</td>
												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>移动3G</td>
												<td>5寸</td>
												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>移动4G</td>


												<td>5.5寸</td>


												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>
											<tr>
												<td>移动4G</td>


												<td>5寸</td>


												<td>
													<input class="form-control"  placeholder="价格">
												</td>
												<td>
													<input class="form-control" placeholder="库存数量">
												</td>
												<td>
													<input type="checkbox" >
												</td>
												<td>
													<input type="checkbox" >
												</td>
											</tr>

											</tbody>
										</table>

									</div>

								</div>
							</div>

						</div>
                        <!--tab内容/-->
						<!--表单内容/-->
                    </div>
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="addGoods()"  ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
            </section>
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" id="color">  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="file" id="myFile" name="image"  multiple>
									<input type="hidden" name="itemImages" id="itemImages">
								</td>
								<td>
									<img  src="../img/user2-160x160.jpg" id="add_img" width="200px" height="200px">
									<input type="hidden" id="cool">
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="toSelectImgs()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
			<script>
				//上传的模态窗口的增加数据方法
				function toSelectImgs() {
					var img = $("#itemImages").val()
					var color = $("#color").val()
					var content = ''
					content+='<tr class="text-center">'
					content+='<td>'+color
					content+='<input type="hidden" name="color" value="'+color+'">'
					content+='<input type="hidden" name="img_id" value="'+img+'">'
					content+='</td>'
					content+='<td><img src="'+img+'" width="100px" height="100px"></td>'
					content+='<td><button type="button" class="btn btn-warning" title="删除" onclick="toSelectDeleteImgs(this)"><i class="fa fa-trash-o"></i> 删除</button></td> '
					content+='</tr>'
					$("#to_update_img").append(content)
				}
				//上传的模态窗口的删除方法(根据节点删除tr)
				function toSelectDeleteImgs(obj) {
					//获得当前Obj内的父节点的父节点，就是tr节点，
					var tr =(obj.parentNode.parentNode);
					//获得table节点对tr节点进行删除
					tr.parentNode.removeChild(tr);
				}
				$(function () {
					//bootstrap 上传的方法
					$('#myFile').fileinput({
						language:'zh',
						uploadUrl: "/file/upLoadFile",
						browseClass: 'btn btn-primary',
						allowedFileExtensions: ['jpg','png','gif'],
						maxFileSize: 2048,
						maxFileCount: 1,
						enctype:'multipart/form-data',
						initialPreviewAsData: true,//是否初始预览图片
						initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
					});
					$('#myFile').on('fileuploaded',function (event,data,previewId,index) {
						if (data.response != null){
							$("[name=itemImages]").val(data.response.result);
							console.log($("#itemImages").val())
						}
					})
				})
			</script>
            <!-- 正文区域 /-->
<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});
</script>
</body>
</html>